import React, {Component} from 'react';
import TodoItem from './TodoItem';
import axios from 'axios';
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: ['aaaa','bbbb'],
      show: true
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

  componentDidMount() {
    axios.get('/api/todolist/todolist.json').then((res)=>{
      console.log(res.data)
      // this.setState(()=>{
      //   return {
      //     list: [...res.data]
      //   }
      // })
    }).catch(()=>alert('error'))
    console.log(this.state.list)
  }

  render() {
    return (
      <>
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input
          ref={(input)=>{this.input = input}}
          id="insertArea"
          className='input' 
            value={this.state.inputValue}
            onChange = {this.handleInputChange}
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul ref={(ul)=>{this.ul = ul}}>
          {

            
            this.getTodoItem()
            
          }
        </ul>
      </>
    )
  }

  getTodoItem() {
    
    return  <TransitionGroup>
      {
          this.state.list.map((item, index) => {
            return (
              
              <CSSTransition in={this.state.show}
              timeout={1000}
              classNames='fade'
              apper={true}
              >
                <TodoItem key={index}  content={item} index={index} deleteItem={this.handleItemDelete}/>
              </CSSTransition>
            )
          })
      }
    </TransitionGroup>
  }

  handleInputChange(e){
    // console.log(this.input) // 使用ref
    const value = e.target.value
    this.setState(()=>({
        inputValue: value
      }
    ))
    // this.setState(()=>{
    //   return {
    //     inputValue: e.target.value
    //   }
    // })
    // this.setState({
    //   inputValue: e.target.value
    // })
  }
  handleBtnClick(e){
    this.setState((prevState)=>({// 异步的setstate
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }),()=> {
      console.log(this.ul.querySelectorAll('div').length)
    })

    // this.setState({
    //   list: [...this.state.list, this.state.inputValue],
    //   inputValue: ''
    // })
  }

  handleItemDelete(index) {
    this.setState((prevState)=>{
      const list = [...prevState.list];
      list.splice(index, 1)
      const show = [prevState.show];
      return {
        list,
        show: !show 
      }
    })
    // const list = [...this.state.list];
    // list.splice(index, 1)
    // this.setState({
    //   list: list
    // })
  }

} 


// function App() {
//   return (
//     <div className="App">
      
//     </div>
//   );
// }

export default App;
